<template>
  <u-popup
    :show="show"
    mode="top"
    @close="close"
    bg-color="transparent"
    :overlay-style="{backgroundColor: 'rgba(50, 50, 50, 0.7)'}"
  >
    <view class="popup-container" @click="close">
      <view class="popup-main" :style="{backgroundImage: `url(${staticImgs.bg})`}">
        <view class="popup-inner" @click.stop>
          <view class="title">测评5折券</view>
          <view class="subtitle flex-cc">全场测评通用</view>
          <view class="receive-btn flex-cc" @click.stop="receive" :style="{backgroundImage: `url(${staticImgs.btn})`}">领取</view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: false,
      staticImgs: {
        bg: this.imgBaseURL + '/returnVisit/coupon_modal_bg.png',
        btn: this.imgBaseURL + '/returnVisit/coupon_modal_btn.png'
      }
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.show = val
        if (val) {
          // 弹过不弹
          uni.removeStorageSync('HalfCouponModalShow')
        }
      }
    }
  },
  methods: {
    close() {
      this.show = false
      this.$emit('input', false)
    },
    receive () {
      // 领取
      this.close()
      this.$emit('success')
    }
  }
}
</script>

<style scoped lang="scss">
.popup-container {
  height: 100vh;
  width: 100vw;
  position: relative;
}

.popup-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 865rpx;
  position: absolute;
  top: -260rpx;
  bottom: 0;
  margin: auto 0;
}

.popup-inner {
  margin-top: 150rpx;
  width: 410rpx;
  height: 590rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.title {
  font-weight: bold;
  font-size: 60rpx;
  color: #FF6583;
  line-height: 84rpx;
  margin-top: 160rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #925A25;
  line-height: 40rpx;
  width: 227rpx;
  height: 50rpx;
  border-radius: 25rpx;
  border: 2rpx solid #D7C2AE;
  margin-top: 14rpx;
}

.receive-btn {
  position: absolute;
  left: 0;
  right: 0;
  top: 655rpx;
  margin: 0 auto;
  border-radius: 50rpx;
  border: 3rpx solid #FFF;
  font-weight: bold;
  font-size: 40rpx;
  color: #FFFFFF;
  line-height: 56rpx;
  width: 340rpx;
  height: 100rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
</style>